<template>
  <div class="menu">
      <div class="erjixuanxiang">
          <ul>
              <li v-for="(v, i) in frous" :key="i">
                  <span :class="['iconfont', v.icon] "></span>
                  <span class="texts">{{v.text}}</span>
              </li>
              <!-- <li>
                  <span class="iconfont icon-rili1"></span>
                  <span class="texts">睡眠监测</span>
              </li>
              <li>
                  <span class="iconfont icon-jianshen-pigu-tunbu-meitunbuttocks"></span>
                  <span class="texts">减脂计划</span>
              </li>
              <li>
                  <span class="iconfont icon-rili"></span>
                  <span class="texts">饮食日记</span>
              </li>
              <li>
                  <span class="iconfont icon-yinle"></span>
                  <span class="texts">睡眠音乐</span>
              </li>
              <li>
                  <span class="iconfont icon-tiaosheng"></span>
                  <span class="texts">跳绳课程</span>
              </li>
              <li>
                  <span class="iconfont icon-huxike"></span>
                  <span class="texts">呼吸训练</span>
              </li> -->
          </ul>
      </div>
  </div>
</template>

<script>
import getlink from "../../apis/getapi"
export default {
    data() {
    return {
      frous: [],
    };
  },
  mounted() {
    getlink("/data/list/xiaoming").then((ok) => {
      console.log(ok.data.fours);
      this.frous = ok.data.fours;
    });
  },
}
</script>

<style scoped>
    .menu{
        display: flex;
        align-items: center;
        width: 90%;
        height: 1rem;
        background: #fdfffe;
        margin: auto;
        border-radius: .3rem;
    }

    .erjixuanxiang{
        height: 70%;
        margin: auto;
        overflow-x :auto;
        
        
    }

    .erjixuanxiang ul{
        display: flex;
        align-items: center;
        height: 100%;
        
    }

    .erjixuanxiang li{
        display: flex;
        flex-shrink: 0;
        align-items: center;
        flex-direction: column;
        width: .8rem;
        height: 90%;

    }
    .erjixuanxiang .iconfont{
        font-size: .35rem;
        color: #f09a51;
    }
    .texts{
        width: .8rem;
        height: .2rem;
        /* background: red; */
        font-size: .16rem;
        text-align: center;
    }
    

</style>